<template>
  <div class="container-article">
      <!-- 搜索区域 -->
      <el-card>
        <!-- 头部 -->
        <div slot="header">
          <!-- 自己封装的组件实现 -->
          <my-bread>内容管理</my-bread>
        </div>
        <!-- 内容 -->
        <el-form label-width="80px" size="small">
          <el-form-item label="状态：  ">
            <el-radio-group v-model="reqParams.status">
              <el-radio :label="null">全部</el-radio>
              <el-radio :label="0">草稿</el-radio>
              <el-radio :label="1">待审核</el-radio>
              <el-radio :label="2">审核通过</el-radio>
              <el-radio :label="3">审核失败</el-radio>
              <el-radio :label="4">已删除</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="频道：  ">
            <!-- 自定义封装组件my-channel -->
            <!--v-model语法糖：简写如下 <my-channel :value="reqParams.channel_id" @input="reqParams.channel_id=$event"></my-channel> -->
            <my-channel v-model="reqParams.channel_id"></my-channel>

          </el-form-item>
          <el-form-item label="日期：  ">
            <!-- 组件产生两个数据，是数组收集数据，[开始日期，结束日期] -->
            <el-date-picker
              @change="changeDate"
              value-format="yyyy-MM-dd"
              v-model="dataArr"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item >
            <el-button type="primary" @click="search()">筛选</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <!-- 结果区域 -->
      <el-card style="margin-top:20px">
          <div slot="header">根据筛选条件共查询到 {{total}} 条结果：</div>
          <!-- 表格 -->
          <el-table :data="articles" >
            <el-table-column  label="封面" >
              <template slot-scope="scope">
                  <el-image :src="scope.row.cover.images[0]" style="width:150px; height:140px">
                    <div slot="error" class="image-slot">
                      <img src="../../assets/images/error.gif" style="width:150px; height:140px">
                    </div>
                  </el-image>
              </template>

            </el-table-column>
            <el-table-column  label="标题" prop="title" ></el-table-column>
            <el-table-column  label="状态" >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status === 0" type="info">草稿</el-tag>
                <el-tag v-if="scope.row.status === 1">待审核</el-tag>
                <el-tag v-if="scope.row.status === 2" type="success">审核通过</el-tag>
                <el-tag v-if="scope.row.status === 3" type="warning">审核失败</el-tag>
                <el-tag v-if="scope.row.status === 4" type="danger">已删除</el-tag>
              </template>
            </el-table-column>
            <el-table-column  label="发布时间" prop="pubdate" ></el-table-column>
            <el-table-column  label="操作" width="120px">
              <template slot-scope="scope">
                <el-button @click="toEdit(scope.row.id)" type="primary" icon="el-icon-edit" circle plain></el-button>
                <el-button @click="delArticle(scope.row.id)"  type="danger" icon="el-icon-delete" circle plain></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination 
             style="margin-top:20px"
             background 
             layout="prev, pager, next"
             :current-page="reqParams.page"
             @current-change="changePager"
             :page-size="reqParams.per_page" 
             :total="total">
           </el-pagination>
      </el-card>
      
  </div>
</template>

<script>
export default {
   // Vue.componnent('组件名称',组件配置对象) 
   //new Vue({components:{组件名称：组件配置对象}})
   //组件配置对象 name属性
   //不要和原生的标签（div,span,header,footer,article....）重名，vue会给你报错
    name:'page-article',
    //==========================
    //这是测试代码
    // created(){
    //   this.$http.get('articles')
    //       .then(res=>{
    //         console.log(res.data);
    //       })
    //       .catch(e => {
    //           console.log(e);
    //       })
    // },
    //============================
    data(){
      return {
        //筛选添加对象（reqParams自定义）（发给后台的参数，保证和后台要求的字段一致）
       reqParams:{
         //0-草稿 1-待审核 2-审核通过 3-审核失败，4-已删除 不传null-全部
         status: null,
         //默认查询全部，频道ID
         channel_id:null,
         //日期范围:开始，
         begin_pubdate:null,
         //日期范围:结束
         end_pubdate:null,
        //  页码
        page:1,
        //每页条数
        per_page:20

       },
       //支持日期范组件的数据,当你选中日期范围后，分别给 begin 和end日期赋值
       dataArr:[],
       //文章数组
       articles:[],
       
       //总条数：
       total:0
      }
    },
    created(){
      this.getArticles()
    },
    methods:{
      //删除文章
      delArticle(id){
          this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( async() => {  
            //点击确认，发删除请求      
            try{
                //1.测试账号的数据，后台不允许删除
                //2.请求成功，但后台没有响应内容--处理json-bigint格式
                await this.$http.delete(`articles/${id}`)
                this.$message.success('删除文章成功！')
                this.getArticles()
            }catch(e){
              this.$message.error('删除文章 失败！');
              
            }
        
        }).catch(() => {
          //点击取消，没有任何逻辑
        });
      },
      //去编辑
      toEdit(id){
        this.$router.push({path:'/publish',query:{id}})
      },

      //选择日期
      changeDate(arr){
        //arr 是数组[起始日期，结束日期]
        //注意：后台需要的日期格式是 2019-10-01 这样的格式
        //组件：支持日期格式设置
        //注意：清空日期的时候也会触发该函数，arr数据是null
        if(arr){
          this.reqParams.begin_pubdate = arr[0]
          this.reqParams.end_pubdate = arr[1]
        }else{
          this.reqParams.begin_pubdate = null
          this.reqParams.end_pubdate = null
        }
        
      },
      //筛选方法  删除状态查询后台不支持
      search(){
        this.reqParams.page = 1
        this.getArticles()
      },
      //切换分页
      changePager(newPage){
        // console.log(newPage);
        this.reqParams.page = newPage
        this.getArticles()
      },
      
      //获取文章数据
      async getArticles(){
        const res = await this.$http.get('articles',{params:this.reqParams})
        console.log(res);
        //筛选文章列表
        this.articles = res.data.data.results
        //总条数
        this.total = res.data.data.total_count
      }
    }

}
</script>

<style scoped lang="less"> 

</style>